import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { TabPage , routeBackToUpperlevel} from 'weaver-mobile-page';
import SignDetail from './signDetail'
import { Tools } from 'weaver-mobile';
const getLabel = Tools.getLabel;

@routeBackToUpperlevel
@inject('viewMeetingStore')
@withRouter
@observer
class SignData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      span: [4,1],
      nowTab:0
    };
  }
  componentDidMount() {
    //param[0:总人数,1:确定参加,2:不参加,3:未提交回执]
    const { getSignCount } = this.props.viewMeetingStore;
    let tempMemberPage = parseInt(sessionStorage.meetingSignNowTab,10);
    this.setState({nowTab:tempMemberPage})
    this.getSignData(tempMemberPage);
    getSignCount();
  }

  componentWillReceiveProps (nextProps) {
    const prePath = this.props.location.pathname;
    const curPath = nextProps.location.pathname;
    if (curPath && curPath !== prePath) {
      this.setPage(curPath);
    }
  }

  //因为用的是二级路由,所以在跳转的时候是会走wilreceive的方法的,为了在返回的时候也可以调用方法,所以将获取数据放到这里
  setPage = (path) => {
    const { getSignCount } = this.props.viewMeetingStore;
    if (path.indexOf('/calendar/detail/sign/signData/allMember') > -1) { 
      this.setState({ nowTab: 0 });
      this.getSignData(0);
      getSignCount(); 
      sessionStorage.setItem("meetingSignNowTab",0);
    }
    if (path.indexOf('/calendar/detail/sign/signData/sign') > -1) { 
      this.setState({ nowTab: 1 });
      this.getSignData(1);
      getSignCount(); 
      sessionStorage.setItem("meetingSignNowTab",1);
    }
    if (path.indexOf('/calendar/detail/sign/signData/unSign') > -1) { 
      this.setState({ nowTab: 2 });
      this.getSignData(2);
      getSignCount(); 
      sessionStorage.setItem("meetingSignNowTab",2);
    }
  }


  getSignData = (key) =>{
    const { setState, getSignList, isSignOut, getSignBackList4mobile } = this.props.viewMeetingStore;
    setState({signSelectType:key});
    if (isSignOut) {
      getSignBackList4mobile();
    } else {
      getSignList();
    }
    
  }

     // 点击tab页切换
   changeTab = (tab,index) => {
    //param[0:应到人数,1:已签到,2:未签到,]
    switch(tab.key) {
      case 0: this.setPath(index, '/calendar/detail/sign/signData/allMember'); sessionStorage.setItem("meetingSignNowTab",0); break;
      case 1: this.setPath(index, '/calendar/detail/sign/signData/sign'); sessionStorage.setItem("meetingSignNowTab",1); break;
      case 2: this.setPath(index, '/calendar/detail/sign/signData/unSign'); sessionStorage.setItem("meetingSignNowTab",2); break;
      default: return;
    }
  }

  setPath = (key, path) => {
    this.props.history.push(path);
  }

  getTopTabs = ()=>{
    const { signDetailCount, isSignOut } = this.props.viewMeetingStore;
    const tabs = [];
    let cardInfo = [
        {title: getLabel(2166, '应到人数'),key:0 , color:'#333333',countFlg:'allMember'},
        {title: getLabel(129011, '已签到'),key:1, color:'#55B1F9',countFlg:'attend'},
        {title: getLabel(129648, '未签到'),key:2, color:'#999999',countFlg:'unWrite'},
    ];
    if (isSignOut) {
      cardInfo = [
        {title: getLabel('510281','应签退人数') ,key:0 , color:'#333333',countFlg:'attend'},
        {title: getLabel('129013','已签退') ,key:1, color:'#55B1F9',countFlg:'signBackCount'},
        {title: getLabel('382725','未签退'),key:2, color:'#999999',countFlg:'notSignBackCount'},
      ];
    }
    // const { counts } = this.props.wfStatusStore;
    cardInfo.map(item =>{
        const key = item.key;
        const tab = (
          <div>
              <div style={{color:item.color,height:'15px',textAlign:'center'}}>{signDetailCount[`${item.countFlg}`]}</div>
              <div style={{color:"#868686"}}>{item.title}</div>
          </div>
      )
      tabs.push({key:key, title: tab});
    });
    return tabs;
  }

  render() {
    let tabTemp = this.getTopTabs();
    const tabProps = {
      onChange: (tab,index) => { this.changeTab(tab,index) },
      page:this.state.nowTab,
      
    };
    return (
      <div className={'sign-data-contain'}>
        <TabPage
          tabs={tabTemp}
          tabProps={tabProps}
        />
        <Switch>
          <Route
            key="allMember"
            path="/calendar/detail/sign/signData/allMember"
            render={()=>(
              <SignDetail />
            )}
          />
          <Route
            key="sign"
            path="/calendar/detail/sign/signData/sign"
            render={()=>(
              <SignDetail />
            )}
          />
          <Route
            key="unSign"
            path="/calendar/detail/sign/signData/unSign"
            render={()=>(
              <SignDetail />
            )}
          />
          </Switch>
      </div>
    )
  }
}

export default SignData;